<template>
  <div>
    <!--门店管理 杨灿-->
    <el-row>
        <el-col :span="5" :offset="1">
          <el-input
            placeholder="请输入类别名称或编号"
            v-model="message"
            clearable>
          </el-input>

        </el-col>
      <el-col :span="1">
        <el-button icon="el-icon-search" circle></el-button>
      </el-col>

      <el-col :span="5" :offset="11">
        <el-button @click="exportStore">导出</el-button>
        <router-link to="/system/EditStore"><el-button type="primary">新增</el-button></router-link>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row>
      <el-col :span="24" >
        <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            fixed
            prop="storeNum"
            label="编号"
           >
          </el-table-column>
          <el-table-column
            prop="storeName"
            label="门店名称"
            >
          </el-table-column>
          <el-table-column
            prop="person"
            label="联系人"
            >
          </el-table-column>
          <el-table-column
            prop="telephone"
            label="联系电话"
           >
          </el-table-column>

          <el-table-column
            prop="address"
            label="详细地址"
          >
          </el-table-column>
          <el-table-column
            prop="storeStatus"
            label="状态"

            :formatter="getStatusFormat" >
          </el-table-column>

          <el-table-column
            label="操作"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
              <el-button type="text" size="small">编辑</el-button>            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="16" :offset="3">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pagesize"
          layout="prev, pager, next, jumper"
          :total="totalCount">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import axios from 'axios';
    export default {
        name: "StoreManager",
        created () {
          this.getData(1)
        },
        methods: {
          exportStore: function(){
            window.location.href="http://localhost:9100/store/exportAll?userId=1";
          },
          handleClick(row) {
            console.log(row);
          },
          //每页显示数据量变更
          handleSizeChange: function(val) {
            this.pagesize = val;
            this.getData(this.currentPage);
          },
          //页码变更
          handleCurrentChange: function(val) {
            this.currentPage = val;
            this.getData(this.currentPage);
          },
          getStatusFormat: function(row){
            //衣服函数 ，用于转换显示
            if (row.storeStatus == 1) {
              return "关闭";
            } else {
              return "开启";
            }
          },
          getData: function(){
            let url = 'http://localhost:9100/store/allByPage';

            // 配置url参数
            let params = {

              currentPage:this.currentPage,
              userId:1
            }

            // 发起axios请求接口

            axios.get(url, {params})
              .then(res => {
                // 得到后台数据
                //赋值给tableData
                console.info(res);
               this.tableData=res.data.data.list;
                this.totalCount=res.data.data.total;

              })
              // 响应失败
              .catch(err => {
                alert('链接错误')
              })

          },
        },
        data() {
          return {
            currentPage: 1,
            message: '',
            tableData: [],
            //默认每页数据量
            pagesize: 5,

            //当前页码
            currentPage: 1,

            //查询的页码
            start: 1,

            //默认数据总数
            totalCount: 1,
          }
        }
    }
</script>

<style scoped>

</style>
